<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="icon" href="img/common/icon.ico" type="image/x-icon" />
    <title>移动H5总结小案例</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/page1.css">
    <link rel="stylesheet" href="./css/page2.css">
    <link rel="stylesheet" href="./css/page3.css">
    <link rel="stylesheet" href="./css/page4.css">
    <link rel="stylesheet" href="./css/page5.css">
    <link rel="stylesheet" href="./css/page6.css">
    <link rel="stylesheet" href="./css/page7.css">
    <link rel="stylesheet" href="./css/page8.css">
</head>
<body>
    <div class="app">
        <div class="content">

            <!-- -----1---- -->
            <div class="page" id="page1">
                
                <div class="page1_circle">
                    <img src="./img/p1/circle.png" alt="">
                </div>
                <div class="load">
                    <span></span>
                </div>
                <div class="page1_dot">
                    <p>...</p>
                    <span>100%</span>
                </div>

            </div>

            <!-- -----2---- -->
            <div class="page" id="page2">

                <div class="page2_circle">
                    <img src="./img/p2/p2-1.png" alt="">
                    <img src="./img/p2/p2-2.png" alt="">
                    <img src="./img/p2/p2-3.png" alt="">
                    <img src="./img/p2/p2-4.png" alt="">
                    <img src="./img/p2/p2-5.png" alt="">
                </div>
                <div class="page2_font">
                    <img src="./img/p2/text.png" alt="">
                </div>
                <img src="./img/p2/circle.png" alt="">
                <div class="page2_meat">
                    <img src="./img/p2/meat.png" alt="">
                </div>
                <div class="page_down">
                    <img src="./img/common/arrow.png" alt="">
                </div>

            </div>

            <!-- -----3---- -->
            <div class="page" id="page3">

                <div class="page3_content">
                    <b>“国家颜值”越来越高，只因我们按下了绿色发展的快捷键</b>
                    <strong>这一年，我们在环保领域实招不断、政令频出； 这一年，我们坚决向污染宣战、突出问题着力解决；这一年，美丽 中国成绩多多</strong>
                </div>
                <img src="./img/p3/bus.png" alt="">
                <div class="page_down">
                    <img src="./img/common/arrow.png" alt="">
                </div>

            </div>

            <!-- -----4---- -->
            <div class="page" id="page4">

                <div class="page4_content">
                    <div class="page4_font">
                        <img src="./img/p4/guo.png" alt="">
                        <img src="./img/p4/mei.png" alt="">
                    </div>
                    <div class="page4_font">
                        <img src="./img/p4/li.png" alt="">
                        <img src="./img/p4/zhong.png" alt="">
                    </div>
                    <div class="page4_btn">
                        <button>取消</button>
                        <button>确定</button>
                    </div>
                    <span></span>
                </div>
                <div class="page_down">
                    <img src="./img/common/arrow.png" alt="">
                </div>

            </div>

            <!-- -----5---- -->
            <div class="page" id="page5">

                <div class="page5_content">
                    <img src="./img/p5/shui3.png" alt="">
                    <img src="./img/p5/shui2.png" alt="">
                    <img src="./img/p5/shui1.png" alt="">
                </div>
                <div class="shade">
                    移动端拖拽蒙版效果
                    <img src="./img/p5/diqiu.png" alt="">
                </div>
                <div class="page_down">
                    <img src="./img/common/arrow.png" alt="">
                </div>

            </div>

            <!-- -----6---- -->
            <div class="page" id="page6">

                <div class="page6_content">
                    <div class="page_issue">
                        <h2>“少壮不努力，老大徒_____”出自《汉乐府·长歌行》。</h2>
                        <p onclick="page6_pair(1,0)">悲伤</p>
                        <p onclick="page6_pair(1,1)">伤悲</p>
                        <p onclick="page6_pair(1,0)">忧伤</p>
                    </div>
                    <div class="page_issue">
                        <h2>晏殊的《浣溪沙》中的“无可奈何花落去”的下句是_____。</h2>
                        <p onclick="page6_pair(2,0)">似曾相识鸟归来</p>
                        <p onclick="page6_pair(2,0)">似曾相识雁归来</p>
                        <p onclick="page6_pair(2,1)">似曾相识燕归来</p>
                    </div>
                    <div class="page_issue">
                        <h2>《七步诗》的作者是_____。</h2>
                        <p onclick="page6_pair(3,1)">曹植</p>
                        <p onclick="page6_pair(3,0)">曹操</p>
                        <p onclick="page6_pair(3,0)">曹佩</p>
                    </div>
                    <div class="page_issue">
                        <h2>杜甫的《春夜喜雨》中的“晓看红湿处”的下句是_____。</h2>
                        <p onclick="page6_pair(4,0)">花重绵阳城</p>
                        <p onclick="page6_pair(4,0)">花重锦州城</p>
                        <p onclick="page6_pair(4,1)">花重锦官城</p>
                    </div>
                    <div class="page_issue">
                        <h2>“春色满园关不住，一枝红杏出墙来。”出自叶绍翁的_____。</h2>
                        <p onclick="page6_pair(5,1)">《游园不植》</p>
                        <p onclick="page6_pair(5,0)">《春望》</p>
                        <p onclick="page6_pair(5,0)">《春夜喜雨》</p>
                    </div>
                    <div class="page_issue">
                        <h2>“海内存知己，天涯若比邻。”是_____的诗句。</h2>
                        <p onclick="page6_pair(6,0)">李白</p>
                        <p onclick="page6_pair(6,1)">王勃</p>
                        <p onclick="page6_pair(6,0)">王维</p>
                    </div>
                    <div class="page_issue">
                        <h2>“人生自古谁无死，留取丹心照_____。”是文天祥的诗句。</h2>
                        <p onclick="page6_pair(7,1)">汗青</p>
                        <p onclick="page6_pair(7,0)">汉青</p>
                        <p onclick="page6_pair(7,0)">汉清</p>
                    </div>
                    <div class="page_issue">
                        <h2>“但使龙城飞将在，不教胡马度_____。”是王昌龄的诗句。</h2>
                        <p onclick="page6_pair(8,0)">边关</p>
                        <p onclick="page6_pair(8,1)">阴山</p>
                        <p onclick="page6_pair(8,0)">燕山</p>
                    </div>
                    <div class="page_issue">
                        <h2>“停车坐爱枫林晚，霜叶红于二月花。”中的“坐”的意思是_____。</h2>
                        <p onclick="page6_pair(9,0)">坐下</p>
                        <p onclick="page6_pair(9,0)">座位</p>
                        <p onclick="page6_pair(9,1)">因为</p>
                    </div>
                    <div class="page_issue">
                        <h2>杜牧的《江南春》中的“南朝四百八十寺”的下句是_____。</h2>
                        <p onclick="page6_pair(10,0)">多少楼台风雨中</p>
                        <p onclick="page6_pair(10,1)">多少楼台烟雨中</p>
                        <p onclick="page6_pair(10,0)">多少楼台烟波中</p>
                    </div>
                    <h3>答对3题,获得"诗仙"称号</h3>
                </div>
                <div class="page_down">
                    <img src="./img/common/arrow.png" alt="">
                </div>

            </div>

            <!-- -----7---- -->
            <div class="page" id="page7">

                <div class="page7_title">
                    <h2>点亮图标</h2>
                </div>
                <div class="page7_content">
                    <div class="line_row">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="line_row">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                    <div class="line_row">
                        <span></span>
                        <span></span>
                        <span></span>
                    </div>
                </div>
                <div class="page7_footer">
                    <button>重来</button>
                </div>
                <div class="page_down">
                    <img src="./img/common/arrow.png" alt="">
                </div>

            </div>

            <!-- -----8---- -->
            <div class="page" id="page8">

                <div class="page8_title">
                    <span>计时</span>
                    <span>加油</span>
                </div>
                <div class="page8_content">
                    <img src="./img/p8/renwu.png" alt="">
                    <div class="show_div">
                        <p>高考倒计时</p>
                        <strong>***</strong><span>天</span>
                        <div>
                            <b>**</b><span>时</span>
                            <b>**</b><span>分</span>
                            <b>**</b><span>秒</span>
                        </div>    
                    </div>
                    <div class="show_div">
                        <img src="./img/p8/jiayou.png" alt="">
                    </div>

                </div>
                <div class="page_down">
                    <img src="./img/common/arrow.png" alt="">
                </div>

            </div>


        </div>

            <!-- -----music---- -->
        <div class="music">
            <img src="./img/common/music.png" alt="">
            <audio src="./media/bgm.mp3"></audio>
        </div>
        <div class="loading">
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <span></span>
            <h4>&nbsp;请用/手机/模拟器/运行此网页</h4>
        </div>
    </div>
</body>
<script src="./js/index.js"></script>
</html>